<template>
  <div>
    <h1>将class属性绑定为数组</h1>
    <div :class="[activeclass, borderclass]">11</div>
    <div :class="[isactive ? activeclass : '', isborder ? borderclass : '']">
      22
    </div>
    <div :class="[{ active: isactive }, borderclass]">33</div>
    <button @click="isactive = !isactive">bg切换</button>
    <button @click="isborder = !isborder">bk切换</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
const activeclass = "active";
const borderclass = "border";
const isactive = ref(true);
const isborder = ref(true);
</script>

<style>
.active {
  width: 100px;
  height: 100px;
  background-color: red;
}
.border {
  border: 2px solid rgb(58, 239, 18);
}
</style>
